<template>
  <view class="news-detail-bg">
    <!-- 标题 -->
    <view class="news-title">
      {{detailInfo.title}}
    </view>
    <!-- 资讯信息 -->
    <view class="news-meta-row">
      <!-- <image class="meta-avatar" src="https://cdn.uviewui.com/uview/example/user_1.jpg" /> -->
      <!-- <view class="meta-author">制造业研究中心</view> -->
      <!-- <view class="meta-dot">·</view> -->
      <view class="meta-date">{{detailInfo.updateTime}}</view>
      <view class="meta-dot">·</view>
      <view class="meta-read">{{detailInfo.viewCount}} 阅读</view>
      <!-- <view class="meta-dot">·</view> -->
      <!-- <view class="meta-comment">46 评论</view> -->
    </view>
    <!-- 封面图片 -->
    <view class="cover-img-wrap">
      <!-- <image class="cover-img" :src="imgUrl+detailInfo.coverImageUrl" mode="widthFix" /> -->
      <!-- <view class="cover-desc">制造业数字化转型研讨会现场实拍</view> -->
    </view>
    <!-- 富文本内容 -->
    <view class="news-content">
      <rich-text :nodes="detailInfo.content"></rich-text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {getNoticeInfo} from '@/api/index.js'
import {imgUrl} from '@/config/index.js'
import {onLoad} from '@dcloudio/uni-app'
onLoad((Options)=>{
  getNoticeInfo({id: Options.id}).then(res=>{
    console.log(res);
    detailInfo.value=res.data
  })
})
let detailInfo=ref({})

</script>

<style scoped>
.news-detail-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.news-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  line-height: 1.4;
  padding: 32rpx 24rpx 0 24rpx;
}
.news-meta-row {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #888;
  padding: 12rpx 24rpx 0 24rpx;
  gap: 10rpx;
}
.meta-avatar {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  margin-right: 8rpx;
}
.meta-author {
  color: #222;
  font-size: 24rpx;
}
.meta-dot {
  margin: 0 6rpx;
}
.cover-img-wrap {
  position: relative;
  margin: 24rpx 24rpx 0 24rpx;
  border-radius: 18rpx;
  overflow: hidden;
}
.cover-img {
  width: 100%;
  height: 260rpx;
  object-fit: cover;
  display: block;
}
.cover-desc {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #fff;
  font-size: 24rpx;
  background: linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,0.45) 100%);
  padding: 18rpx 24rpx 12rpx 24rpx;
  box-sizing: border-box;
}
.news-content {
  background: #fff;
  border-radius: 18rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 32rpx 24rpx 32rpx 24rpx;
  font-size: 30rpx;
  color: #222;
  line-height: 1.9;
  word-break: break-all;
}
.news-content h3 {
  font-size: 32rpx;
  font-weight: bold;
  margin: 32rpx 0 18rpx 0;
  color: #222;
}
.news-content p {
  margin-bottom: 18rpx;
  color: #333;
  font-size: 30rpx;
}
</style>